<template>
  <a-layout-header>
    <div class="tab">
      <div class="tab-item" @click="switchTab(item)" v-for="(item, index) in menus" :key="index">{{ item.title }}</div>
    </div>
  </a-layout-header>
</template>

<script>
import router from '@/router'
import store from '@/store'
export default{
  name: 'Header',
  data () {
    return {
      menus: [{
        name: 'home',
        title: '首页'
      },{
        name: 'project',
        title: '项目管理'
      },{
        name: 'contract',
        title: '合同管理'
      },{
        name: 'service',
        title: '服务商'
      },{
        name: 'data',
        title: '经营数据'
      },{
        name: 'supervise',
        title: '日常监督'
      }]
    }
  },
  props: {

  },
  methods: {
    switchTab(item){
      store.dispatch('GenerateRoutes', { roles: [item.name] }).then(() => {
        // 根据roles权限生成可访问的路由表
        // 动态添加可访问路由表
        console.log(store.getters.addRouters)
        console.log(router)
        // router.addRoutes(store.getters.addRouters)
      })
    }
  },
  watch: {

  },
  mounted () {
    this.switchTab({name: 'home'})
  },
  created () {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .tab{
    display: flex;
    .tab-item{
      width: 100px;
      color: $white;
      cursor: pointer;
    }
  }
</style>
